﻿@page "/components/navpanel"

<PageOutlet Url="components/navpanel"
            Title="NavPanel"
            Description="navpanel component of the bit BlazorUI components" />

<DemoPage Name="NavPanel"
          Description="BitNavPanel is a navigation component specialized to be rendered in a vertical panel."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          PublicMembers="componentPublicMembers"
          SubEnums="componentSubEnums"
          GitHubExtrasUrl="NavPanel/BitNavPanel.razor"
          GitHubDemoUrl="Extras/NavPanel/BitNavPanelDemo.razor">
    <NotesTemplate>
        <BitText>
            To use this component, you need to install the
            <BitLink Href="https://www.nuget.org/packages/Bit.BlazorUI.Extras" Target="_blank">
                <BitTag Reversed
                        Text="Bit.BlazorUI.Extras"
                        Color="BitColor.SecondaryBackground"
                        IconName="@BitIconName.NavigateExternalInline" />
            </BitLink>
            nuget package, as described in the Optional steps of the
            <BitLink Href="/getting-started">Getting started</BitLink> page.
        </BitText>
    </NotesTemplate>
    <DescriptionTemplate>
        BitNavPanel is a navigation component specialized to be rendered in a vertical panel. In its core it's utilizing the <BitLink Href="/components/nav">BitNav</BitLink> component to render the nav items.
    </DescriptionTemplate>
    <Examples>
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="basicIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="basicIsOpen" Items="basicNavItems" />
            </div>
        </DemoExample>

        <DemoExample Title="FitWidth" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="fitWidthIsOpen" OnText="Close" OffText="Open" />
            </div>
            <BitNavPanel @bind-IsOpen="fitWidthIsOpen" Items="basicNavItems" FitWidth />
        </DemoExample>

        <DemoExample Title="FullWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="fullWidthIsOpen" OnText="Close" OffText="Open" />
            </div>
            <BitNavPanel @bind-IsOpen="fullWidthIsOpen" Items="basicNavItems" FullWidth />
        </DemoExample>

        <DemoExample Title="NoToggle" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="noToggleIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="noToggleIsOpen" Items="basicNavItems" NoToggle />
            </div>
        </DemoExample>

        <DemoExample Title="Icon" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="iconUrlIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="iconUrlIsOpen" Items="basicNavItems" IconNavUrl="https://bitplatform.dev" IconUrl="/images/icon.png" />
            </div>
        </DemoExample>

        <DemoExample Title="SearchBoxPlaceholder" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="searchBoxPlaceholderIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:240px">
                <BitNavPanel @bind-IsOpen="searchBoxPlaceholderIsOpen" Items="basicNavItems" SearchBoxPlaceholder="Search in menu items..." />
            </div>
        </DemoExample>

        <DemoExample Title="NoSearchBox" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="noSearchBoxIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:240px">
                <BitNavPanel @bind-IsOpen="noSearchBoxIsOpen" Items="basicNavItems" NoSearchBox />
            </div>
        </DemoExample>

        <DemoExample Title="EmptyListMessage" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="emptyListMessageIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="emptyListMessageIsOpen" Items="basicNavItems" EmptyListMessage="There is no item found." />
            </div>
        </DemoExample>

        <DemoExample Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="templateIsOpen" OnText="Close" OffText="Open" />
            </div>
            <BitNavPanel @bind-IsOpen="templateIsOpen" Items="basicNavItems" FitWidth NoToggle>
                <Header>
                    <BitText Typography="BitTypography.H5"><b>NavPanel</b> header</BitText>
                </Header>
                <ItemTemplate Context="item">
                    <BitText><i><b>@item.Text</b></i></BitText>
                    <BitSpacer />
                    @if (item.Data is not null)
                    {
                        <BitTag Size="BitSize.Small" Color="BitColor.Info">@item.Data</BitTag>
                    }
                </ItemTemplate>
                <Footer>
                    <BitActionButton IconName="@BitIconName.PowerButton">Logout</BitActionButton>
                </Footer>
            </BitNavPanel>
        </DemoExample>

        <DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="eventIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div>
                Clicked item: @onItemClick?.Text
                <br />
                Toggled item: @onItemToggle?.Text
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="eventIsOpen"
                             Items="eventNavItems"
                             OnItemClick="(BitNavItem item) => HandleOnItemClick(item)"
                             OnItemToggle="(BitNavItem item) => HandleOnItemToggle(item)" />
            </div>
        </DemoExample>

        <DemoExample Title="Public APIs" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="publicApiIsOpen" OnText="Close" OffText="Open" />
            </div>
            <BitButton OnClick="async () => await navPanelRef.Toggle()">Toggle</BitButton>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="publicApiIsOpen" @ref="navPanelRef" Items="basicNavItems" HideToggle />
            </div>
        </DemoExample>

        <DemoExample Title="Color" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="colorIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="colorIsOpen" Items="basicNavItems" Color="BitColor.Secondary" Accent="BitColor.SecondaryBackground" />
            </div>
        </DemoExample>

        <DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="classStyleIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div style="width:222px">
                <BitNavPanel @bind-IsOpen="classStyleIsOpen"
                             Items="basicNavItems"
                             Styles="@(new() { Container = "background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);" })"
                             NavClasses="@(new() { ItemContainer = "custom-nav-item", 
                                                   ItemIcon = "custom-nav-item-ico", 
                                                   ItemText = "custom-nav-item-txt" })"
                             SearchBoxClasses="@(new() { Icon = "custom-icon-searchbox",
                                                         Focused = "custom-focused-searchbox",
                                                         ClearButton = "custom-clear-searchbox",
                                                         IconWrapper = "custom-icon-wrapper-searchbox",
                                                         InputContainer = "custom-input-container-searchbox" })" />
            </div>
        </DemoExample>

        <DemoExample Title="RTL" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
            <div class="open-btn">
                <BitToggleButton @bind-IsChecked="rtlIsOpen" OnText="Close" OffText="Open" />
            </div>
            <div dir="rtl">
                <BitNavPanel @bind-IsOpen="rtlIsOpen" Items="rtlNavItems" FitWidth Dir="BitDir.Rtl" />
            </div>
        </DemoExample>
    </Examples>
</DemoPage>